<template>
  <!-- 热门头条  1-->
  <main id="maincontent">
    <div class="container container--zone">
      <div class="region region--full">
        <div class="component component--module quick-links">
          <!-- 引入公共组件 tabText.vue-->
          <tabText :listlinkData='interList' :moreList='moreList' @tabChange="tabChange"></tabText>
        </div>
      </div>
      <div class="region region--primary">
        <!-- 引入公共组件面包屑  pageHead.vue-->
        <pageHead :titleData="titleData"></pageHead>

        <!-- 引入封装 头条 -->
        <frontPage v-if="isRegion" :FrontData="FrontDat" :FrontData1="FrontData1" :text="text"></frontPage>
        <!-- 指数 未封装 -->
        <div class="component component--module tickers-bar">
          <div class="column column--full">
            <div class="element element--ticker">
              <div class="overflow--table"></div>

              <div class="content-wrapper">
                <div class="list list--tickers">
                  <a v-for="(item, index) in districtData1" :key="index" class="ticker__item positive"
                    :href="item.link">
                    <span class="label">{{ item.district }}</span>
                    <bg-quote class="value">{{ item.exponent }}</bg-quote>
                    <i class="icon icon--caret"></i>
                    <!-- 逻辑判断为正时显示上箭头 为负时显示下箭头 -->
                    <!-- <i class="icon icon--caret"></i> -->
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 引入公共组件  newsViewer.vue-->
        <newsViewer :newsData="newsData2" :newstitle="newstitle"></newsViewer>
      </div>
      <!-- 右侧广告部分 -->
      <!-- <div class="region region--aside sticky">
        <div class="sticky__innards" style="position: static">
          <div class="component component--module">
            <div class="column column--full">
              <div class="element element--ad is-loaded">
                <div id="ad-display-ad" class="j-ad">
                  <div
                    id="google_ads_iframe_/2/marketwatch.com/latest_news/latest_news_2__container__"
                    style="border: 0pt none"
                  >
                    <div
                      class="wrapper dianomi_smartad_53416 _dianomi_wrapper"
                      id="53416"
                    >
                      <div id="dianomi_ad_1" class="hero first">
                        <div class="subhero border" >
                          <div class="heading_top" style="border: 1px solid black"></div>
                          <a
                            id="dianomihref-0x21FC2D8A9F144E67BBDC065E674F6860"
                            href=""
                          >
                            <img
                              class="png"
                              alt="PwC"
                              src="https://www.dianomi.com/img/a/sav2/324355/13/300x160.jpg"
                              height="160"
                              width="300"
                            />
                            <div class="text">
                              <div class="dianomiHeading heading"></div>
                              <div class="maintext">
                                45% of CEOs question their company's long-term
                                viability. Read more.
                              </div>
                              <div
                                class="dianomi_provider_short"
                              >
                                PwC
                              </div>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>

    <div class="container container--zone" role="region">
      <!-- 引入公共组件  marketPlace.vue  We Make-->
      <marketPlace></marketPlace>
      <!-- 引入 MOST POPULAR 组件 -->
      <mastPopular :popularData="popularData" v-if="isRegion"></mastPopular>
    </div>

    <div class="container container--zone" role="region">
      <div class="region region--primary">
        <div class="component component--module text__block">
          <div class="column column--primary">
            <div class="element element--textblock contained">
              <p><b>Get news sent directly to your inbox</b></p>
              <p>
                Get breaking news and incisive analysis sent to your inbox.
                Choose from a number of free newsletter options at Sinopoly Watch,
                including Need to Know, which provides a guide to the trading
                day.
              </p>
              <p>
                <a href="">Select a newsletter</a>
              </p>
            </div>
          </div>
        </div>
        <timeTableMk :timeNewsData="newsData1" :titleTime="titleTime"></timeTableMk>
      </div>
    </div>
  </main>
</template>

<script setup>
import marketPlace from "./marketPlace/marketPlace";
const props = defineProps(["imgData"]);
import { newsDataArrays } from "@/api/latest.js";
import newsViewer from "@/views/latestNews/hotheHeadlines/newsViewer/newsViewer";
import frontPage from "@/views/latestNews/hotheHeadlines/frontPage/frontPage";
// 引入公共组件 tabText.vue
import tabText from "@/components/tabText/tabText";
// 引入面包屑模块
import pageHead from "@/components/pageHead/pageHead";
// 引入 MOST POPULAR 组件
import mastPopular from "@/views/home/mastPopular/mastPopular";
// 
import timeTableMk from "@/views/market/timeTableMk/timeTableMk";
// 新闻列表
let FrontData = ref([]);
let FrontDat = ref([]);
let FrontData1 = ref([]);
let newsData2 = ref([]);
const newstitle = ref({
  title: 'TOP HEADLINES',
  content: 'The stories leading the MarketWatch homepage right now.'
});
let newsData1 = ref([]);
let titleTime = ref({
  title: 'The Wall Street Journal',
  content: 'Headlines from The Wall Street Journal',
})
import homeRequest from "@/api/home.js";
const isRegion = ref(false);
const popularData = ref([])
function frontData() {
  //新闻列表
  let data = {
    current: "1",
    size: "50",
    isImg: 1,
    key: "earnings",
  };
  homeRequest.newsData(data)
    .then((res) => {
      if (res.code == "0") {
        FrontData = res.data.records;
        FrontDat = FrontData.slice(1, 3);
        FrontData1 = FrontData.slice(3, 7);
        newsData2 = FrontData.slice(7, 14);
        newsData1 = FrontData.slice(14, 25);
        isRegion.value = true;
        popularData.value = FrontData.slice(25, 33)
      }
    })
    .catch((e) => {
      console.log("login error", e);
    });
}
onMounted(async () => {
  await frontData();
});
const titleData = reactive({
  title: "Latest News",
  link: "Home",
  name: "Latest News",
  name1: "",
});
const {
  listlinkData,
  moreList,
  // FrontData,
  // FrontData1,
  districtData1,
  FrontData2,
  // newsData1,
} = newsDataArrays();
</script>

<style scoped lang="scss"></style>
